<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
export default {
  /**
   props配置项中的数据不是自己的, 不可以任意修改
   */
  props: {
    count: Number,
  },
  /**
   data配置项中定义的数据是组件自己的, 可以任意修改 
  */
  // data() {
  //   return {
  //     count: 100,
  //   };
  // },
  methods: {
    handleSub() {
      this.$emit("changeCount", this.count - 1);
    },
    handleAdd() {
      this.$emit("changeCount", this.count + 1);
    },
  },
};
</script>

<style>
.base-count {
  margin: 20px;
}
</style>